<template>
    <div class="registerbox">
        <el-form class="login_form" label-width="auto" :model="loginform" :rules="rules" ref="loginrule">

 
            <el-form-item prop="account" label="用户名：">
                <el-input style="height: 40px;" placeholder="请输入用户名" v-model="loginform.account"></el-input>
            </el-form-item>

            <el-form-item prop="password" label="密码：">
                <el-input style="height: 40px;" placeholder="请输入密码" :show-password="true" v-model="loginform.password"
                    type="password"></el-input>
            </el-form-item>

            <el-form-item prop="rePassword" label="重复密码：">
                <el-input style="height: 40px;" placeholder="请输入重复密码" :show-password="true"
                    v-model="loginform.rePassword" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱：">
                <el-input style="height: 40px;" placeholder="请输入邮箱" v-model="loginform.email"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="手机号：">
                <el-input style="height: 40px;" placeholder="请输入手机号" v-model="loginform.phone" type="number"></el-input>
            </el-form-item>
            <el-form-item prop="code" label="验证码：">
                <el-input style="height: 40px;" placeholder="请输入验证码" type="number" v-model="loginform.regCode">
                    <template #append>
                        <el-button @click="sendCode" :disabled="isSending || count > 0">
                            {{ isSending ? '发送中...' : count > 0 ? `${count}秒后重试` : '发送验证码' }}
                        </el-button>
                    </template>
                </el-input>


            </el-form-item>
            <el-form-item>
                <el-button style="height: 50px;" :loading="loading" class="login_btn" size="default" @click="login"
                    type="primary">注册</el-button>
            </el-form-item>


        </el-form>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { ElNotification } from 'element-plus'
import { useRouter } from 'vue-router'
import { userregister } from '../../api/user/index'
import bus from "../../utils/bus";
import { md5 } from 'js-md5'
//md5加密后的密码
// const md5Pwd=md5("123456");
// console.log(md5Pwd);


let $router = useRouter()
let isSending = ref(false)
const count = ref(0)
const sendCode = () => {

    if (count.value > 0 || isSending.value) {
        return; // 防止重复点击发送
    }

    // 假设在这个方法中实现发送验证码的逻辑
    // 可以调用sendVerificationCode()方法发送验证码
    // 这里只是简单模拟发送过程
    isSending.value = true;

    startCountdown();

    setTimeout(() => {
        // 假设发送成功后将isSending重置为false
        isSending.value = false;
    }, 2000);

}
const startCountdown = () => {
    count.value = 60;
    const timer = setInterval(() => {
        count.value--;
        if (count.value <= 0) {
            clearInterval(timer);
        }
    }, 1000);
}

let loginform = reactive({
    account: '',
    password: '',
    rePassword: '',
    email: '',
    phone: '',
    regCode: ''
})
let loginrule = ref()

const rulename = (rule, value, callback) => {
    if (value.length >= 5) {
        callback()
    } else {
        callback(new Error('账号至少五位！'))
    }
}
const rulepassword = (rule, value, callback) => {
    if (value.length >= 6) {
        callback()
    } else {
        callback(new Error('密码至少六位！'))
    }
}
const rules = {
    account: [
        { trigger: 'change', validator: rulename }
    ],
    password: [
        { trigger: 'change', validator: rulepassword }
    ],
    rePassword: [
        { trigger: 'change', validator: rulepassword }
    ]

}
const login = async () => {

    await loginrule.value.validate()
    loading.value = true
    const res = await userregister(
        {
            account: loginform.account,
            password: md5(loginform.password),
            rePassword: md5(loginform.rePassword),
            email: loginform.email,
            phone: loginform.phone,
            regCode: loginform.regCode
        }) as any

    if (res.code == 200) {
        ElNotification({
            type: 'success',
            message: '注册成功请登录~'
        })
        bus.emit("Amessage", true);
        loading.value = false
    } else {
        ElNotification({
            type: 'error',
            message: res.msg
        })
    }
    loading.value = false
}
let loading = ref(false)
</script>
<style lang="scss" scoped>
.registerbox {
    padding: 100px 0 300px;
}

.login_form {
    margin: 0 auto;
    padding: 0px;
    width: 40%;
    background-size: cover;
    color: white;

    h1 {
        font-size: 40px;
    }

    h2 {
        font-size: 20px;
        margin: 20px 0;
    }

    .login_btn {
        width: 100%;
    }
}
</style>